<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>


    <!-- 主体 -->
    <main class="center w1">
        <!-- 轮播 -->
        <header class="lunbo">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../img/00.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/66.png" alt="">
                    </div>

                    <div class="swiper-slide">
                        <img src="../img/iu.png" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->

                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>
        </header>


        <div class="content-main pd10 mt6 w1">
            
            <section class="mian-t fsb mb20 pre">
                <div class="ranking pdt16 pre">
                    <!-- <img src="../img/index-card-rank.png" alt=""> -->
                   
                    <span class="r-to pre">今日排名</span>
                    <span class="r-day pre" id="ranking">999</span>
                    <span class="r-img pab"></span>
                </div>
                <div class="punch-card pre">
                    <p class="pab add-car">累计打卡 <span id="punchIn">999</span> 天</p>
                    <img src="../img/index-card-sum.png" alt="">
                    <div class="pab to-car" id="isCard">今日打卡</div>

                </div>
            </section>

            <section class="mian-m fsb mb20 pre">
                <div class="motion-data pre">
                    <img src="../img/index-card-data.png" alt="" class="">
                    <span class="pab">
                        运动数据
                    </span>
                </div>
                <div class="badge pre">
                    <img src="../img/index-card-badge.png" alt="" class="pre">

                    <span class="pab">累计运动徽章</span>
                    <p class="pab"> <span id="badgeCount">999</span> 枚</p>

                </div>
            </section>

            <section class="pro-train mb20 pre" id="kcCenter">
                <div>
                    <img src="../img/course-img04.jpg" alt="">
                    <span class="pab">课程训练</span>
                </div>
            </section>

            <section class="out-run mb20 pre">
                <div>
                    <img src="../img/index-card-run.png" alt="">
                    <span class="pab">户外跑步</span>
                </div>
            </section>


             <section class="out-run mb20 pre">
                 <div>
                     <img src="../img/index-card-data.png" alt="">
                     <span class="pab">户外运动</span>
                 </div>
             </section>
        </div>

    </main>



    <footer class="w1 table-footer">
        <div class="checkout" id="mIndex">
            <span class="iconfont icon-home fs32"></span>
            <span>首页</span>
        </div>

        <div id="exercise">
            <span class="iconfont icon-aixinfengxian fs32
"></span>
            <span>运动</span>
        </div>

        <div id="mine">
            <span class="iconfont icon-wode fs32"></span>
            <span>我的</span>
        </div>
    </footer>


</body>

</html>